<script>
import Child from "./Child.vue";

export default {
  name: "App",
  components: {Child},
  data(){
    return {
      mytext:"",
    }
  }

}
</script>

<template>
  <input v-model="mytext" @input="mytext=$event.target.value">{{mytext}}
  <child v-slot="myprops">
    <ul>
      <li v-for="data in myprops.mylist" :key="data.id">
        <div v-if='data.showName.includes(mytext) && mytext != ""' style="color: red;background: yellow;font-size: 20px">
          {{data.showName}} {{myprops.a}}
        </div>
        <div v-else>
          {{data.showName}} {{myprops.a}}
        </div>
      </li>
    </ul>
  </child>
</template>

<style scoped>

</style>